<template>
  <div class="home">
    <!-- 轮播 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      :lunbolist="lunbolist"
    >
      <van-swipe-item
        class="item-img"
        v-for="item in lunbolist"
        :key="item.bannerid"
      >
        <img v-lazy="item.img" />
      </van-swipe-item>
    </van-swipe>

    <!-- 宫格 -->
    <van-grid :column-num="5">
      <van-grid-item
        v-for="item in navlist"
        :key="item.navid"
        :icon="item.imgurl"
        :text="item.title"
       
      />
    </van-grid>

    <!-- 海狗秒杀 -->
    <div class="Countdown">
      <div class="Countdown-left">
        <span class="box">海狗秒杀</span>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <div class="Countdown-right">
        <span>更多秒杀</span>
        <span class="right-span">&gt;</span>
      </div>
    </div>

    <van-grid :column-num="6">
      <van-grid-item
        class="van-grid-list"
        v-for="item in commoditylist[0]"
        :icon="item.img1"
        :key="item.proid"
        :text="`${item.originprice}元`"
         to="/goodsinfo"
      />
    </van-grid>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lunbolist: [],
      navlist: [
        {
          navid: 1,
          title: '嗨购超市',
          imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png',
        },
        {
          navid: 2,
          title: '数码电器',
          imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg',
        },
        {
          navid: 3,
          title: '嗨购服饰',
          imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg',
        },
        {
          navid: 4,
          title: '嗨购生鲜',
          imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg',
        },
        {
          navid: 5,
          title: '嗨购到家',
          imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg',
        },
        {
          navid: 6,
          title: '充值缴费',
          imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg',
        },
        {
          navid: 7,
          title: '9.9元拼',
          imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png!q70.jpg.dpg',
        },
        {
          navid: 8,
          title: '领券',
          imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg',
        },
        {
          navid: 9,
          title: '领金贴',
          imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg',
        },
        {
          navid: 10,
          title: 'puls会员',
          imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg',
        },
      ],
      time: 86400000,
      commoditylist: [],
    };
  },
  created() {
    this.getlunbo();
    this.getcommodity();
  },
  methods: {
    async getlunbo() {
      const res = await this.$http.GetLunBo();
      this.lunbolist = res.data.data;
    },
    async getcommodity() {
      const res = await this.$http.GetCommodity();
      this.commoditylist.push(res.data.data.slice(0, 6));
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  .grid-itemList {
    width: 100%;
    height: 50px;
    display: flex;
    // flex-wrap: wrap;
  }
  .my-swipe {
    width: 100%;
    height: 137px;
    margin-top: 2px;
    .item-img {
      width: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  //倒计时秒杀
  .Countdown {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    // height: 25px;
    background: #eee;
    .Countdown-left {
      display: flex;
      .box {
        font-weight: 600;
        margin-right: 5px;
      }
    }
    .Countdown-right {
      span {
        display: inline-block;
      }
      .right-span {
        display: inline-block;
        background-color: gold;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
      }
    }
    .colon {
      display: inline-block;
      margin: 0 4px;
      color: #ee0a24;
    }
    .block {
      display: inline-block;
      width: 22px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      background-color: #ee0a24;
    }
    .van-grid-list {
      width: 70px;
      display: flex;
      .grid-list-item {
        width: 70px;
        display: flex;
        img {
          width: 100px;
        }
      }
    }
  }
}
</style>
